<template>
  <div>
    <div class="MyShipment">
      <!-- 列表  -->
      <van-tabs
        v-model="active"
        sticky
        title-active-color="#f5a623"
        color="#f5a623"
      >
        <van-tab :title="`正在发货(${list.length})`">
          <div v-if="list.length > 0">
            <MyShipmentItem
              v-for="(item, index) in list"
              :key="index"
              :data="item"
              type="1"
            />
          </div>
          <van-empty description="没有更多了~" v-else />
        </van-tab>
        <van-tab :title="`已完成发货(${list1.length})`">
          <!-- 筛选 -->
          <MyShipmentScreen @changeParams="changeParams" />
          <!-- 统计 -->
          <Count :data="count" />
          <!-- 列表 -->
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了~"
            @load="getMyShipmentOld"
          >
            <div v-if="list1.length > 0">
              <MyShipmentItem
                v-for="(item, index) in list1"
                :key="index"
                :data="item"
                type="0"
              />
            </div>
            <van-empty v-else />
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs, List, Button, Empty } from "vant";
import MyShipmentItem from "@/components/MyShipmentItem";
import MyShipmentScreen from "@/components/MyShipmentScreen";
import Count from "@/components/Count";

import {
  getMyShipmentNew,
  getMyShipmentOld,
  getMyShipmentOldCount,
} from "@/services/api";
Vue.use(Empty);
Vue.use(Button);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(List);
export default {
  data() {
    return {
      params: {
        masterWaybillLike: "",
        deliverGoodsTimeStart: "",
        deliverGoodsTimeEnd: "",
        pageNum: 1,
        pageSize: 20,
      },
      active: 0,
      loading: false,
      finished: false,
      list: [],
      list1: [],
      count: {
        numTotal: 0,
        total: 0,
        weightTotal: 0,
      },
    };
  },
  created() {
    this.getMyShipmentNew();
    this.myShipmentOldCount();
    this.getMyShipmentOld();
  },
  mounted() {
    window["reload"] = () => {
      this.getMyShipmentNew();
      this.myShipmentOldCount();
      this.params.pageNum = 1;
      this.finished == false;
    };
  },
  methods: {
    // 获取正在发货的数据
    getMyShipmentNew() {
      getMyShipmentNew().then((res) => {
        this.list = res;
      });
    },
    // 获取已完成发货的数据
    getMyShipmentOld() {
      getMyShipmentOld(this.params)
        .then((res) => {
          if (res) {
            this.loading = false;
            if (this.params.pageNum == 1) {
              this.list1 = res.list;
            } else {
              this.list1 = this.list1.concat(res.list);
            }
            this.params.pageNum += 1;
          }
          if (res.list.length < 20) {
            this.finished = true;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 获取总统计数量
    myShipmentOldCount() {
      getMyShipmentOldCount().then((res) => {
        this.count = res;
      });
    },
    // 子组件传值
    changeParams(e) {
      this.params = { ...e, pageNum: 1, pageSize: 20 };
      this.finished = false;
      this.getMyShipmentOld();
    },
  },
  components: {
    MyShipmentItem,
    MyShipmentScreen,
    Count,
  },
};
</script>

<style lang="scss">
.MyShipment {
  .van-tabs__line {
    width: 50%;
  }
}
</style>